<template>
  <a-spin class="w-[100%]" :size="35" :loading="spinLoading" tip="正在处理, 请稍候...">
    <a-form :model="form" ref="formRef" :rules="rules" auto-label-width>
      <div class="flex justify-between" style="flex-wrap: wrap">
        <a-form-item class="w-[100%]" field="orderNumber" label="订单号" required>
          <a-input v-model="form.orderNumber" placeholder="请输入订单号" />
        </a-form-item>
        <a-form-item class="w-[33%]" field="berthNumber" label="泊位号" required>
          <a-input v-model="form.berthNumber" placeholder="请输入泊位号" />
        </a-form-item>
        <a-form-item class="w-[33%]" field="pointCharge" label="收费点" required>
          <a-input v-model="form.pointCharge" placeholder="请输入收费点" />
        </a-form-item>
        <a-form-item class="w-[33%]" field="plateNumber" label="车牌号" required>
          <a-input v-model="form.plateNumber" placeholder="请输入车牌号" />
        </a-form-item>
        <a-form-item class="w-[33%]" field="enterDate" label="驶入时间">
          <a-date-picker
            class="w-[100%]"
            v-model="form.enterDate"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择驶入时间"
          />
        </a-form-item>
        <a-form-item class="w-[33%]" field="exitDate" label="驶离时间">
          <a-date-picker
            class="w-[100%]"
            v-model="form.exitDate"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择驶离时间"
          />
        </a-form-item>
        <a-form-item class="w-[33%]" field="stayDate" label="停留时长">
          <a-input v-model="form.stayDate" placeholder="停留时长" disabled />
        </a-form-item>
        <a-form-item class="w-[100%]" field="pictureUrl" label="图片链接">
          <a-textarea
            v-model="form.pictureUrl"
            placeholder="请输入图片URL链接"
            allow-clear
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </div>
    </a-form>

    <!-- 分割线 -->
    <a-divider class="mt-0" />

    <div class="flex justify-end">
      <a-space>
        <a-button @click="cancelBtnClick()">取消</a-button>
        <a-button type="primary" @click="okBtnClick()">确定</a-button>
      </a-space>
    </div>
  </a-spin>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch } from "vue";
import { addApi, updateApi, getApi } from "~/api/tc/order.js";

//全局实例
const { proxy } = getCurrentInstance();
//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {},
  },
});
//父组件函数
const emits = defineEmits(["ok", "cancel"]);
//加载中...
const spinLoading = ref(false);
//表单ref
const formRef = ref(null);
//表单
const form = reactive({
  //订单ID
  orderId: null,
  //订单号
  orderNumber: null,
  //泊位号
  berthNumber: null,
  //收费点
  pointCharge: null,
  //驶入时间
  enterDate: null,
  //驶离时间
  exitDate: null,
  //停留时长
  stayDate: null,
  //车牌号
  plateNumber: null,
  //图片链接
  pictureUrl: null,
});

//确定 -> 点击
const okBtnClick = () => {
  //表单验证
  formRef.value.validate((valid) => {
    if (valid) {
      return false;
    }
    //添加
    if (props.params.operationType === proxy.operationType.add.type) {
      spinLoading.value = true;
      addApi(form)
        .then(() => {
          proxy.$msg.success(proxy.operationType.add.success);
          emits("ok");
        })
        .finally(() => {
          spinLoading.value = false;
        });
    }
    //修改
    if (props.params.operationType === proxy.operationType.update.type) {
      spinLoading.value = true;
      updateApi(form)
        .then(() => {
          proxy.$msg.success(proxy.operationType.update.success);
          emits("ok");
        })
        .finally(() => {
          spinLoading.value = false;
        });
    }
  });
};
//取消 -> 点击
const cancelBtnClick = () => {
  emits("cancel");
};
//图片列表
const pictureList = ref([]);
//加载订单详细信息
const loadOrderInfo = (orderId) => {
  spinLoading.value = true;
  getApi(orderId)
    .then((res) => {
      //数据赋值
      if (res) {
        for (let key in res) {
          if (form.hasOwnProperty(key)) {
            form[key] = res[key];
          }
        }
        //图片回显
        if (res.pictureUrl) {
          pictureList.value.push({
            url: res.pictureUrl,
            response: { fileUrl: res.pictureUrl },
          });
        }
      }
    })
    .finally(() => {
      spinLoading.value = false;
    });
};
//监听参数变化
watch(
  () => props.params,
  (newVal, oldVal) => {
    //订单ID
    if (props.params.orderId) {
      //加载订单信息
      loadOrderInfo(props.params.orderId);
    }
  },
  { deep: true, immediate: true }
);
</script>
<style scoped></style>
